<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax图书实例</title>
</head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
<style>
  body{
    padding: 15px;
  }
</style>
<body>
  <!-- 添加图书的Panel面板 -->
  
  <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input type="text" id="iptname" class="form-control" id="iptBookname" placeholder="请输入书名" >
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input type="text" id="iptauthor" class="form-control" id="iptBookname" placeholder="请输入作者" >
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input type="text" id="iptpub" class="form-control" id="iptBookname" placeholder="请输入出版社" >
        </div>

        <button class="btn btn-primary">添加</button>
      </div>
  </div>
  
  <!-- 图书的表格 -->
  
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">
      <!-- <tr>
        <td>1</td>
        <td>西游记</td>
        <td>吴承恩</td>
        <td>北京出版社</td>
        <td><a href="#">删除</a></td>
      </tr> -->
    </tbody>
  </table>
  

  <script type="text/javascript" src="./jquery-3.6.0/jQuery3.6.js"></script>
  <script type="text/javascript">
    // $($.ajax({
    //   type: "get",
    //   url: "http://www.liulongbin.top:3006/api/getbooks",
    //   success: (e) => {
    //     console.log(e.data);
    //   }
    // }))

    

    $(function() {
      function getBooklist(){
        $.ajax({
          type: "get",
          url: "http://www.liulongbin.top:3006/api/getbooks",
          success: (e) => {
            // console.log(e);
            //判断是否获取成功
            if(e.status !== 200) return alert("获取数据失败");

            // 创建一个临时变量
            var rows = [];

            // $.each类似于array.prototype.forEach()一样循环做相同的处理函数
            $.each(e.data, (i, item) => {
              rows.push(`
                <tr>
                  <td>${item.id}</td>
                  <td>${item.bookname}</td>
                  <td>${item.author}</td>
                  <td>${item.publisher}</td>
                  <td><a href="#" class="del" data-id="${item.id}">删除</a></td>
                </tr>
              `)
            })

            $("#tb").empty().append(rows.join(''));
          }
        })
      }

      getBooklist();

      // $("del").on("click", function(e){
      //   console.log("ok");
      // })
      
      // 事件委托完成删除事件
      $("table").on("click", ".del", function(){
       var id = $(this).attr("data-id");
        $.ajax({
          type: "get",
          url: "http://www.liulongbin.top:3006/api/delbook",
          data: {
            id: id
          },
          success: (res)=>{
            if(res.status !== 200) return alert("删除图书失败!");
            // 重新渲染
            getBooklist();
          }
        })
      })

      // 添加图书
      $('.btn').on('click', () => {
        var bookname = $("#iptname").val().trim(),
            bookauthor = $("#iptauthor").val().trim(),
            bookpub = $("#iptpub").val().trim();
        // console.log(bookname);
        if(bookname && bookauthor && bookpub){
          alert("成功");
        }else{
          return alert("填写完整信息!!!");
        }
        $.ajax({
          type: "post",
          url: "http://www.liulongbin.top:3006/api/addbook",
          data: {
            bookname: bookname,
            author: bookauthor,
            publisher: bookpub
          },
          success: (res) => {
            if(res.status !== 201) return alert("添加失败!!!");
            // 重新渲染
            getBooklist();
            // 清除input
            $("input").val("");
          }
        })
      })

    })
  </script>
</body>
</html>